import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { eq } from '@/lib/db';
import { db, userBadges } from '@/lib/db';
import { publicProfile } from '@/lib/account/queries';
import { summarizePortfolio } from '@/lib/account/portfolio';
import { BADGE_DEFS } from '@/lib/account/badges';
import { Card, CardHeader, Badge, EmptyState, Delta } from '@/components/ui/primitives';
import { Donut } from '@/components/account/charts';
import { fmtMoney, fmtDate } from '@/lib/format';

export async function generateMetadata({ params }: { params: Promise<{ handle: string }> }): Promise<Metadata> {
  const { handle } = await params;
  const p = await publicProfile(handle);
  if (!p) return { title: 'Collector not found' };
  const name = p.user.name ?? `@${p.user.handle}`;
  return { title: `${name} · Collector profile`, description: p.user.bio ?? `${name} on RareIndex`, openGraph: { title: `${name} on RareIndex`, description: p.user.bio ?? 'Collector profile', images: [`/u/${handle}/opengraph-image`] } };
}

export default async function ProfilePage({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const p = await publicProfile(handle);
  if (!p) notFound();
  const total = summarizePortfolio(p.items);
  const badges = await db().select().from(userBadges).where(eq(userBadges.userId, p.user.id));
  return (
    <div className="mx-auto max-w-4xl">
      <header className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center">
        {p.user.avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={p.user.avatarUrl} alt="" className="h-20 w-20 rounded-full border border-border object-cover" />
        ) : (
          <span className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-accent text-2xl font-semibold text-accent-fg">{(p.user.name ?? p.user.handle ?? '?').slice(0, 1).toUpperCase()}</span>
        )}
        <div className="min-w-0 flex-1">
          <h1 className="text-2xl font-semibold tracking-tight">{p.user.name ?? `@${p.user.handle}`}</h1>
          <p className="text-sm text-muted">
            @{p.user.handle} · member since {fmtDate(p.user.createdAt, { month: 'long' })}
          </p>
          {p.user.bio ? <p className="mt-2 max-w-xl text-sm">{p.user.bio}</p> : null}
          {badges.length ? (
            <div className="mt-3 flex flex-wrap gap-1.5">
              {badges.map((b) => (
                <Badge key={b.badge} tone={BADGE_DEFS[b.badge]?.tone ?? 'neutral'}>
                  {BADGE_DEFS[b.badge]?.label ?? b.badge}
                </Badge>
              ))}
            </div>
          ) : null}
        </div>
        <div className="text-right">
          <p className="text-[11px] uppercase tracking-wider text-subtle">Public collection value</p>
          <p className="num text-2xl font-semibold">{total.valuedCount ? fmtMoney(total.valueUsd) : '—'}</p>
          <p className="text-xs text-muted">
            {total.itemCount} item{total.itemCount === 1 ? '' : 's'} across {p.collections.length} public collection{p.collections.length === 1 ? '' : 's'}
          </p>
        </div>
      </header>
      {p.collections.length === 0 ? (
        <Card>
          <EmptyState title="No public collections" description="This collector has not shared any collection yet." />
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
          <div className="space-y-3">
            {p.collections.map(({ collection: c, summary: s }) => (
              <Link key={c.id} href={`/u/${handle}/${c.publicSlug}`} className="card flex items-center justify-between gap-3 p-4 hover:border-border-strong">
                <div className="min-w-0">
                  <p className="truncate text-sm font-semibold">{c.name}</p>
                  <p className="text-xs text-muted">{c.description ?? `${s.itemCount} items`}</p>
                </div>
                <div className="text-right">
                  <p className="num text-base font-semibold">{s.valuedCount ? fmtMoney(s.valueUsd) : '—'}</p>
                  <Delta value={s.returnPct} className="text-xs" />
                </div>
              </Link>
            ))}
          </div>
          <Card>
            <CardHeader title="Allocation" />
            <div className="p-4">
              <Donut data={total.allocationByFamily.map((b) => ({ label: b.label, value: b.valueUsd }))} size={110} />
            </div>
          </Card>
        </div>
      )}
      <p className="mt-6 text-[11px] text-subtle">Values are RareIndex Valuation estimates with confidence levels; purchase prices are never shown publicly. RareIndex does not authenticate items.</p>
    </div>
  );
}